<template>
  <div class="all-goods">
    <div class="banxin">
      <Breadcrumb :arr="links"></Breadcrumb>
      <Banner :src="ad"></Banner>
      <div class="jifen flex">
        <div class="left">积分：</div>
        <ul class="flex">
          <li v-for="item in priceGroup" :key="item.id">
            <span
              @click="getPriceData(item)"
              :class="{ active: priceId === item.id }"
              >{{ item.text }}</span
            >
          </li>
        </ul>
      </div>
      <div class="cate flex">
        <div class="left">分类：</div>
        <ul class="flex">
          <li v-for="item in cateGroup" :key="item.id">
            <span
              @click="getCateData(item)"
              :class="{ active: cateId === item.id }"
              >{{ item.text }}</span
            >
          </li>
        </ul>
      </div>

      <!-- 商品列表 -->
      <GoodList :arr="list"></GoodList>
      <p>
        <i class="iconfont icon-loading" v-show="isLoading"></i>
      </p>
      <p style="text-align: center" v-show="currentPage >= pagedData.length">
        没有更多数据了
      </p>
    </div>
  </div>
</template>
<script>
import ad from "../assets/images/home/ad.png";
import Banner from "../components/home/Banner.vue";
import GoodList from "../components/home/GoodList.vue";
import Breadcrumb from "../components/common/Breadcrumb.vue";
import { getMoreApi } from "../http/api";
import { toast } from "../utils/toast";
export default {
  data() {
    return {
      links: [
        { path: "/home", text: "主页" },
        { path: "", text: "全部商品", isLast: true },
      ],
      priceId: 1,
      cateId: 10,
      // 把最大和最小和当前分类也在data里面存一份
      currentMin: 0,
      currentMax: 0,
      currentCate: 0,
      // 商品数据
      list: [],
      ad,
      priceGroup: [
        { id: 1, text: "全部", min: 0, max: 0 },
        { id: 2, text: "我能兑换的", min: 0, max: 0 },
        { id: 3, text: "0-500分", min: 0, max: 500 },
        { id: 4, text: "500-1000分", min: 500, max: 1000 },
        { id: 5, text: "1000-1500分", min: 1000, max: 1500 },
        { id: 6, text: "1500-2500分", min: 1500, max: 2500 },
      ],
      cateGroup: [
        { id: 10, text: "全部", type: 0 },
        { id: 11, text: "实体商品", type: 1 },
        { id: 12, text: "虚拟商品", type: 2 },
      ],
      // 这是用来存储分好的数据的数组
      pagedData: [],
      currentPage: 1,
      isLoading: false,
      // 滚动加载的节流开关
      isTimeout: true,
    };
  },
  components: {
    Banner,
    GoodList,
    Breadcrumb,
  },
  created() {
    this.getGoods();
  },
  methods: {
    getCateData(item) {
      this.cateId = item.id;
      // 修改当前是哪个分类
      this.currentCate = item.type;
      this.getGoods();
    },
    getPriceData(item) {
      // 如果点击的是 我能兑换的 需要先判断是否已经登录
      // 判断 是否是 我能兑换的 被点击
      if (item.id === 2) {
        if (this.$store.state.userInfo.coin !== undefined) {
          // 如果是已经登录了，把  priceGroup 里面的 id为2的那个 max变成我的鸡腿
          this.priceGroup[1].max = this.$store.state.userInfo.coin;
          console.log(this.$store.state.userInfo.coin);
        } else {
          // 没有登录
          toast("请先登录", "warnning");
          this.$store.commit("modifyShowLogin", true);
          return;
        }
      }
      this.priceId = item.id;
      this.currentMin = item.min;
      this.currentMax = item.max;
      this.getGoods();
    },
    async getGoods() {
      const params = {
        // 这里加上 did ，did代表对应的 精品或者 热门
        did: this.$route.query.did || 0,
        type: this.currentCate,
        min: this.currentMin,
        max: this.currentMax,
        // 加上一个关键字，用于搜索的
        keyword: this.$route.query.keyworld || "",
      };
      const { data } = await getMoreApi(params);
      // this.list = data.map((e) => {
      //   e.coverImg = `http://sc.wolfcode.cn` + e.coverImg;
      //   return e;
      // });
      // this.list = data

      // 将来我们做所有数据的展示一般都会分布
      // 分页： a. 滚动加载  b.点击加载
      // 获取下一页数据： a. 一次性返回大量数据，我们在前端自己划分  b. 每次获取就去服务器请求一页数据
      // 我们现在是 滚动+一次性大量数据
      // 先把数据划分： 1. 定下一份有多少条，
      const size = 8;
      // 2. 把数据 / 条数 ，得到有多少份
      const pages = Math.ceil(data.length / size);
      for (let i = 1; i <= pages; i++) {
        this.pagedData[i] = data.slice((i - 1) * size, i * size);
      }
      // console.log(this.pagedData);
      // 3. 先把第1份，展示出来
      this.list.push(...this.pagedData[this.currentPage]);
      // 4.当滚动触底，加载下一页
      // 在mounted里面注册dom事件
    },
  },
  // 如果直接在当前页面进行搜索，不会重新触发created，使用watch
  // 通过路由监听实现路由传递的数据在当前页面刷新不会触发请求的问题
  watch: {
    "$route.query": {
      handler() {
        this.getGoods();
        // 如果在这里面做事件太多，也可以直接刷新页面
        // this.$router.go(0)
      },
      deep: true,
    },
  },
  mounted() {
    // 给window注册滚动事件
    window.onscroll = () => {
      // 如果滚动出去的距离 + 浏览器的可视区域高度 >=  页面的高度
      const out = document.documentElement.scrollTop || document.body.scrollTop; // 滚出去的距离
      const bh =
        document.documentElement.clientHeight || document.body.clientHeight; // 浏览器可视区域的高度
      const ph =
        document.documentElement.offsetHeight || document.body.offsetHeight; // 页面高度
      // console.log(out,bh,ph);
      if (out + bh >= ph - 150) {
        // 判断节流的开关超时没有
        if (this.isTimeout) {
          // 把开关关上
          this.isTimeout = false;
          // 在n秒后，再开启
          setTimeout(() => {
            this.isTimeout = true;
          }, 2500);
          // 判断滚动触底没有

          this.currentPage++;
          console.log(this.currentPage);
          // 如果已经没有数据了，就不让继续加载了
          if (this.currentPage >= this.pagedData.length) return;
          // 把loading显示
          this.isLoading = true;
          setTimeout(() => {
            // 如果已经加载了全部的数据
            if (this.currentPage < this.pagedData.length) {
              // 当滚动触底，加载下一页数据
              this.list.push(...this.pagedData[this.currentPage]);
            }
            this.isLoading = false
            // 还要在异步操作里面把 timeout 也改变
            this.isTimeout = true
          }, 800);
        }
      }
    };
  },
  beforeDestroy() {
    // 所有不是使用vue注册的事件，记得在销毁vue的时候要 解绑
    window.onscroll = null;
  },
};
</script>

<style lang="less" scoped>
.all-goods {
  .banxin {
    .flex {
      padding: 10px 0;
    }
    .left {
      font-size: 16px;
      font-family: SourceHanSansSC;
      font-weight: bold;
      color: #333333;
      line-height: 36px;
    }
    li {
      color: #666;
      padding: 0 10px;
      span {
        cursor: pointer;
        &.active {
          color: #00329b;
        }
      }
    }
  }
}
.iconfont.icon-loading {
  display: block;
  margin: auto;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  animation: loading 1s linear infinite;
}
@keyframes loading {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
